<template>
  <el-dialog
    width="50%"
    :title="$t('i18n.diaParameters')"
    v-model="dialogParameterVisible"
    :before-close="() => {}"
    :show-close="false"
  >
    <el-scrollbar style="height:360px">
      <tree-component-vue
        :treeData="trees"
        :expandAll="expandAll"
        :showCheckBox="paramters.fieldKey.selectType == 1"
        @OpenTreeItem="OpenTreeItem"
        v-loading="loaded"
        ref="dialogTree"
      ></tree-component-vue>
    </el-scrollbar>
    <el-divider
      v-if="paramters.fieldKey.selectType == 1"
      class="el-ex-divider--horizontal"
    ></el-divider>
    <div class="custom-tree-result" v-if="paramters.fieldKey.selectType == 1">
      <el-button
        type="danger"
        icon="el-icon-back"
        size="mini"
        @click="dialogParameterVisible = false"
        >{{ $t("table.Global_Cancel") }}</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-check"
        size="mini"
        @click="confirm()"
        >{{ $t("i18n.btn_submit") }}</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import TreeComponentVue from "./TreeComponent.vue";
import reqVue from "../utils/req.vue";
export default {
  emits: ["confirmEvent"],
  props: {
    expandAll: {
      type: Boolean,
    },
  },
  data() {
    return {
      dialogParameterVisible: false,
      trees: [],
      loaded: false,
      checkStrictly: true,
      paramters: {},
    };
  },
  components: { TreeComponentVue },
  methods: {
    InitData() {
      this.loaded = true;
      reqVue
        .$Post(null, "parameter/v1.0/tree/" + this.paramters.fieldKey.parameterCode)
        .then(
          function(data) {
            this.trees = data.body;
            this.loaded = false;
            this.$refs.dialogTree.checkStrictly = true;
            this.$nextTick(function() {
              let ckes = [];
              this.paramters.data.forEach((d) => {
                data.body.forEach((b) => {
                  if (b.code == d.parameterCode) {
                    ckes.push(b);
                  }
                  this.forPostion(b.children, d, ckes);
                });
              });
              this.$refs.dialogTree.$refs.tree.setCheckedKeys(ckes);
            });
          }.bind(this)
        );
    },
    forPostion(orgs, org) {
      let ckes = [];
      orgs.forEach((b) => {
        if (b.code == org.parameterCode) {
          ckes.push(b);
        }
        this.forPostion(b.children, org, ckes);
      });
      this.$refs.dialogTree.$refs.tree.setCheckedKeys(ckes);
    },
    OpenTreeItem(items) {
      this.dialogParameterVisible = false;
      let pers = [];
      items.forEach((element) => {
        pers.push({
          parameterId: element.id,
          parameterCode: element.code,
          cnName: element.cnName,
          enName: element.enName,
        });
      });
      this.$emit("confirmEvent", {
        key: this.paramters.fieldKey,
        result: pers,
      });
    },
    changeStatus: function(callback) {
      this.$refs.dialogTree.checkStrictly = callback;
    },
    confirm() {
      this.dialogParameterVisible = false;
      let results = this.$refs.dialogTree.$refs.tree.getCheckedNodes();
      let pers = [];
      results.forEach((element) => {
        pers.push({
          parameterId: element.id,
          parameterCode: element.code,
          cnName: element.cnName,
          enName: element.enName,
        });
      });
      this.$emit("confirmEvent", {
        key: this.paramters.fieldKey,
        result: pers,
      });
    },
  },
};
</script>
